<!--
	卡片阴影样式：https://blog.csdn.net/qq_44607694/article/details/89605857
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>熙华记事本</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			background-color: #F0F0F0;
		}

		.todo {
			background-color: red !important;
			width: 96.5%;
			list-style: none;
			line-height: 35px;
			border-top: 0.5px solid #E0E0E0;
			border-bottom: 0.5px solid #E0E0E0;
			border-left: 1px solid #E0E0E0;
			border-right: 1px solid #E0E0E0;
		}

		#todoapp {
			width: 650px;
			height: 300px;
			margin: auto;
		}

		h1 {
			margin: 50px 0;
			text-align: center;
			color: rgb(171, 11, 235);
			font-weight: 500;
			font-size: 50px;
		}

		input::-webkit-input-placeholder {
			color: #9C9C9C;
		}

		.new-todo {
			outline: none;
			width: 95%;
			height: 60px;
			border: 1px solid #E0E0E0;
			background-color: white;
			padding: 0 4px;
			color: #9C9C9C;
			font-size: 20px;
		}

		.view {
			display: flex;
			padding: 0 4px;
			height: 60px;
			color: #9C9C9C;
			font-size: 25px;
			background-color: white;
		}

		.index {
			flex: 1;
			background-color: white;
		}

		label {
			flex: 10;
			background-color: white;
		}

		.destroy {
			flex: 1;
			font-size: 20px;
			display: none;
			color: red;
			border: none;
			background-color: white;
		}

		.view:hover .destroy {
			display: block;
		}

		.todo-count {
			display: block;
			width: 95%;
			line-height: 35px;
			color: #9C9C9C;
			font-size: 20px;
			padding: 0 4px;
			border: 0.5px solid #E0E0E0;
			background-color: white;
			box-shadow:
				0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%),
				0 0.5em 0 -0.25em #f2f2f2ed,
				0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1),
				0 1em 0 -0.5em #e5e5e5,
				0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
		}

		strong {
			background-color: white;
		}

		.todo-clear {
			position: relative;
			background-color: white;
			color: #9C9C9C;
			font-size: 20px;
			top: -30px;
			left: 580px;
			border: none;
		}
	</style>
</head>

<body>
	<section id="todoapp">
		<header class="header">
			<h1>小黑记事本</h1>
			<input v-model="inputValue" @keyup.enter="add" class="new-todo" autofocus="autofocus" autocomplete="off"
				placeholder="请输入任务" />
		</header>

		<section class="main">
			<ul class="todo-list">
				<li class="todo" v-for="(item,index) in list">
					<div class="view">
						<span class="index">{{index+1}}</span>
						<label>{{item}}</label>
						<button class="destroy" @click="remove(index)">×</button>
					</div>
				</li>
			</ul>
		</section>
		<footer class="footer" v-show="list.length==0?fales:true">
			<span class="todo-count">
				<strong>{{list.length}}</strong> items left
			</span>
			<button class="todo-clear" @click="clear">clear</button>

		</footer>
	</section>
	<footer class="info"></footer>

	<script src="js/vue.js"></script>
	<script>
		var app = new Vue({
			el: "#todoapp",
			data: {
				list: ["大西厢", "锁麟囊", "同仁堂"],
				inputValue: ""
			},
			methods: {
				add: function () {
					this.list.push(this.inputValue);
					this.inputValue = ""
				},
				remove: function (index) {
					this.list.splice(index, 1);
				},
				clear: function () {
					this.list = [];
				}
			}
		})
	</script>
</body>

</html>